<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 视口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>2023-2-25 spirit</title>

    <!-- 样式引入 最好按照顺序
         后面会影响前面的
    -->

    <!-- 引入WOW动画库 -->
    <link rel="stylesheet" href="./css/animate.min.css" />

    <!-- 引入bootstrap核心css文件 -->
    <link rel="stylesheet" href="./css/bootstrap.min.css" />

    <!-- swiper -->
    <link rel="stylesheet" href="./css/swiper-bundle.min.css" />

    <!-- 引入less文件此处必须添加 /less  ！！！ -->
    <!-- 引入重置样式文件 -->
    <link rel="stylesheet/less" href="./css/reset.less" />

    <!-- 引入公共样式 -->
    <link rel="stylesheet/less" href="./css/common.less" />

    <!-- 引入页面单独样式 -->
    <link rel="stylesheet/less" href="./css/index.less" />
  </head>
  <body>
    <!-- 最大容器 -->
    <div class="warp">
      <!-- header 头部 -->
      <header>
        <!-- 导航栏 -->
        <nav class="navbar navbar-inverse">
          <div class="container">
            <!-- 移动端导航 + LOGO -->
            <div class="navbar-header">
              <button
                type="button"
                class="navbar-toggle collapsed"
                data-toggle="collapse"
                data-target="#bs-example-navbar-collapse-1"
                aria-expanded="false"
              >
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <!-- LOGO -->
              <a class="navbar-brand" href="#">spirit8</a>
            </div>

            <!-- 导航内容 -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#">home</a></li>
                <li><a href="#">about</a></li>
                <li><a href="#">services</a></li>
                <li><a href="#">protfolio</a></li>
                <li><a href="#">testimonials</a></li>
                <li><a href="#">CONTACT</a></li>
              </ul>
            </div>
          </div>
        </nav>
      </header>

      <!-- 广告图 -->
      <div class="banner">
        <h1>wELCOME on <span>spirit8</span></h1>
        <small>We are a digital agency with <span>years of experience</span> and with <span>extraordinary people</span></small>
        <div class="more">
          <img src="./images/arrow_03.png" alt="" />
        </div>
      </div>

      <!-- 栅格系统
           container -> row -> col-lg-* -> 内容
           占满12格自动换行，一个container 一个row即可
           多余的行与row同级写
           内容同级，默认按照纵向排列
       -->
      <!-- ABOUT US  -->
      <div class="about">
        <div class="container">
          <!-- 一行最多12个格子，自行分配大小 -->
          <div class="row">
            <!-- 左边图片占七份 -->
            <div class="col-lg-7">
              <!-- 响应式图片 -->
              <img class="img-responsive img" src="./images/mac.png" alt="" />
            </div>
            <!-- mac右边的文字（占五份） -->
            <div class="col-lg-5">
              <small>ABOUT US</small>
              <div class="title">some words <span>about us</span></div>
              <div class="content">
                We love building and rebuilding brands through our specific skills. Using colour, fonts, and illustration, we brand companies in a way
                they will never forget.
              </div>
              <!--   M  S  C -->
              <div class="box">
                <div class="item">
                  <p><span>Mission -</span> We deliver uniqueness and quality</p>
                </div>
                <div class="item">
                  <p><span>Skills -</span> Delivering fast and excellent results</p>
                </div>
                <div class="item">
                  <p><span>Clients -</span> Satisfied clients thanks to our experience</p>
                </div>
              </div>
              <!-- 按钮 -->
              <div class="about-btn">
                <img src="./images/about-btn.png" alt="" />
                Browse our work
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Meet our team -->
      <div class="team">
        <h1>Meet <span>our team</span></h1>
        <div class="line"></div>
        <div class="line-2"></div>
        <div class="container">
          <!-- swiper组件（网上下载的） -->
          <div class="swiper team-swiper">
            <div class="swiper-wrapper">
              <!-- 第一页 -->
              <div class="swiper-slide">
                <!-- 栅格 -->
                <div class="row">
                  <!-- 占三格（一共四个） -->
                  <div class="col-md-3 col-sm-6">
                    <div class="item">
                      <img src="./images/cxk.png" alt="" />
                      <div class="right">
                        <div class="nickname">Jason Statham</div>
                        <div class="small">Knife designer</div>
                        <div class="content">Do not seek to change what has come before. Seek to create that which has not.</div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-6">
                    <div class="item">
                      <img src="./images/cxk.png" alt="" />
                      <div class="right">
                        <div class="nickname">Jason Statham</div>
                        <div class="small">Knife designer</div>
                        <div class="content">Do not seek to change what has come before. Seek to create that which has not.</div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-6">
                    <div class="item">
                      <img src="./images/cxk.png" alt="" />
                      <div class="right">
                        <div class="nickname">Jason Statham</div>
                        <div class="small">Knife designer</div>
                        <div class="content">Do not seek to change what has come before. Seek to create that which has not.</div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-6">
                    <div class="item">
                      <img src="./images/cxk.png" alt="" />
                      <div class="right">
                        <div class="nickname">Jason Statham</div>
                        <div class="small">Knife designer</div>
                        <div class="content">Do not seek to change what has come before. Seek to create that which has not.</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 第二页 -->
              <div class="swiper-slide">
                <!-- 栅格 -->
                <div class="row">
                  <!-- 占三格（一共四个） -->
                  <div class="col-md-3 col-sm-6">
                    <div class="item">
                      <img src="./images/cxk.png" alt="" />
                      <div class="right">
                        <div class="nickname">Jason Statham</div>
                        <div class="small">Knife designer</div>
                        <div class="content">Do not seek to change what has come before. Seek to create that which has not.</div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-6">
                    <div class="item">
                      <img src="./images/cxk.png" alt="" />
                      <div class="right">
                        <div class="nickname">Jason Statham</div>
                        <div class="small">Knife designer</div>
                        <div class="content">Do not seek to change what has come before. Seek to create that which has not.</div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-6">
                    <div class="item">
                      <img src="./images/cxk.png" alt="" />
                      <div class="right">
                        <div class="nickname">Jason Statham</div>
                        <div class="small">Knife designer</div>
                        <div class="content">Do not seek to change what has come before. Seek to create that which has not.</div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-6">
                    <div class="item">
                      <img src="./images/cxk.png" alt="" />
                      <div class="right">
                        <div class="nickname">Jason Statham</div>
                        <div class="small">Knife designer</div>
                        <div class="content">Do not seek to change what has come before. Seek to create that which has not.</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 第三页 -->
              <div class="swiper-slide">
                <!-- 栅格 -->
                <div class="row">
                  <!-- 占三格（一共四个） -->
                  <div class="col-md-3 col-sm-6">
                    <div class="item">
                      <img src="./images/cxk.png" alt="" />
                      <div class="right">
                        <div class="nickname">Jason Statham</div>
                        <div class="small">Knife designer</div>
                        <div class="content">Do not seek to change what has come before. Seek to create that which has not.</div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-6">
                    <div class="item">
                      <img src="./images/cxk.png" alt="" />
                      <div class="right">
                        <div class="nickname">Jason Statham</div>
                        <div class="small">Knife designer</div>
                        <div class="content">Do not seek to change what has come before. Seek to create that which has not.</div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-6">
                    <div class="item">
                      <img src="./images/cxk.png" alt="" />
                      <div class="right">
                        <div class="nickname">Jason Statham</div>
                        <div class="small">Knife designer</div>
                        <div class="content">Do not seek to change what has come before. Seek to create that which has not.</div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-3 col-sm-6">
                    <div class="item">
                      <img src="./images/cxk.png" alt="" />
                      <div class="right">
                        <div class="nickname">Jason Statham</div>
                        <div class="small">Knife designer</div>
                        <div class="content">Do not seek to change what has come before. Seek to create that which has not.</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
          </div>
        </div>
      </div>

      <!-- services -->
      <div class="services">
        <h1>take a look at <span>our services</span></h1>
        <div class="line"></div>
        <div class="line-2"></div>
        <small
          >Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written
          in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum
          dolor sit amet..", comes from a line in section 1.10.32.</small
        >
        <!-- 四个图标+内容 
             基本结构
             container -> row -> col-lg-3 col-md-3 col-sm-3 
             每个都是同级排列
        -->
        <div class="container">
          <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-3">
              <div class="s-team">
                <img src="./images/s-team1.png" alt="" />
                <div class="s-classify">web design</div>
                <div class="s-intro">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
              </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3">
              <div class="s-team">
                <img src="./images/s-team1.png" alt="" />
                <div class="s-classify">web design</div>
                <div class="s-intro">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
              </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3">
              <div class="s-team">
                <img src="./images/s-team1.png" alt="" />
                <div class="s-classify">web design</div>
                <div class="s-intro">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
              </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-3">
              <div class="s-team">
                <img src="./images/s-team1.png" alt="" />
                <div class="s-classify">web design</div>
                <div class="s-intro">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- clients -->
      <div class="clients">
        <h1>SOME OF <span>OUR CLIENTS</span></h1>
        <div class="line"></div>
        <div class="line-2"></div>
        <div class="swiper clients-swiper">
          <div class="swiper-wrapper">
            <!-- 第一页 -->
            <div class="swiper-slide">
              <img class="img-responsive" src="./images/clients.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img class="img-responsive" src="./images/clients.png" alt="" />
            </div>
            <div class="swiper-slide">
              <img class="img-responsive" src="./images/clients.png" alt="" />
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
        </div>
      </div>

      <!-- work -->
      <div class="work">
        <h1>take a look at <span>our work</span></h1>
        <div class="line"></div>
        <div class="line-2"></div>
        <div class="container content">
          Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero,writtenin45
          BC.This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum,"Loremipsumdolor sit
          amet..", comes from a line in sect ion 1.10.32.
        </div>
        <!-- 十二张“专辑” -->
        <div class="container">
          <!-- <div class="col-lg-6 col-md-6 col-sm-6 filter">filter by type</div>
            <div class="col-lg-6 col-md-6 col-sm-6 all"><span>ALL</span>丨Web design丨Mobile design 丨Photograpy</div> -->

          <div class="menu">
            <div class="title">Filter by type</div>
            <div class="menu-nav">
              <a href="#">ALL</a>
              <a href="#">Web desig</a>
              <a href="#">Mobile design</a>
              <a href="#">Photograpy</a>
            </div>
            <div class="mobile-nav">
              <select>
                <option value="">ALL</option>
                <option value="">Web desig</option>
                <option value="">Mobile design</option>
                <option value="">Photograpy</option>
              </select>
            </div>
          </div>
        </div>
        <div class="container">
          <div class="list">
            <div class="row">
              <div class="col-lg-3 col-sm-6">
                <div class="img-zhe">
                  <!-- 图片盒子加上动画效果 -->
                  <div class="img-box wow slideInLeft" data-wow-duration=".5s">
                    <img class="img-responsive" src="./images/filter.png" alt="" />
                  </div>
                  <div class="zhe">
                    <img class="img-responsive" src="./images/filter-zhe_03.png" alt="" />
                  </div>
                </div>
              </div>
              <div class="col-lg-3 col-sm-6">
                <div class="img-zhe">
                  <div class="img-box wow slideInLeft">
                    <img class="img-responsive" src="./images/filter.png" alt="" />
                  </div>
                  <div class="zhe">
                    <img class="img-responsive" src="./images/filter-zhe_03.png" alt="" />
                  </div>
                </div>
              </div>
              <div class="col-lg-3 col-sm-6">
                <div class="img-zhe">
                  <div class="img-box wow slideInLeft">
                    <img class="img-responsive" src="./images/filter.png" alt="" />
                  </div>
                  <div class="zhe">
                    <img class="img-responsive" src="./images/filter-zhe_03.png" alt="" />
                  </div>
                </div>
              </div>
              <div class="col-lg-3 col-sm-6">
                <div class="img-zhe">
                  <div class="img-box wow slideInLeft">
                    <img class="img-responsive" src="./images/filter.png" alt="" />
                  </div>
                  <div class="zhe">
                    <img class="img-responsive" src="./images/filter-zhe_03.png" alt="" />
                  </div>
                </div>
              </div>

              <div class="col-lg-3 col-sm-6">
                <div class="img-zhe">
                  <div class="img-box">
                    <img class="img-responsive" src="./images/filter.png" alt="" />
                  </div>
                  <div class="zhe">
                    <img class="img-responsive" src="./images/filter-zhe_03.png" alt="" />
                  </div>
                </div>
              </div>
              <div class="col-lg-3 col-sm-6">
                <div class="img-zhe">
                  <div class="img-box">
                    <img class="img-responsive" src="./images/filter.png" alt="" />
                  </div>
                  <div class="zhe">
                    <img class="img-responsive" src="./images/filter-zhe_03.png" alt="" />
                  </div>
                </div>
              </div>
              <div class="col-lg-3 col-sm-6">
                <div class="img-zhe">
                  <div class="img-box">
                    <img class="img-responsive" src="./images/filter.png" alt="" />
                  </div>
                  <div class="zhe">
                    <img class="img-responsive" src="./images/filter-zhe_03.png" alt="" />
                  </div>
                </div>
              </div>
              <div class="col-lg-3 col-sm-6">
                <div class="img-zhe">
                  <div class="img-box">
                    <img class="img-responsive" src="./images/filter.png" alt="" />
                  </div>
                  <div class="zhe">
                    <img class="img-responsive" src="./images/filter-zhe_03.png" alt="" />
                  </div>
                </div>
              </div>

              <div class="col-lg-3 col-sm-6">
                <div class="img-zhe">
                  <div class="img-box">
                    <img class="img-responsive" src="./images/filter.png" alt="" />
                  </div>
                  <div class="zhe">
                    <img class="img-responsive" src="./images/filter-zhe_03.png" alt="" />
                  </div>
                </div>
              </div>
              <div class="col-lg-3 col-sm-6">
                <div class="img-zhe">
                  <div class="img-box">
                    <img class="img-responsive" src="./images/filter.png" alt="" />
                  </div>
                  <div class="zhe">
                    <img class="img-responsive" src="./images/filter-zhe_03.png" alt="" />
                  </div>
                </div>
              </div>
              <div class="col-lg-3 col-sm-6">
                <div class="img-zhe">
                  <div class="img-box">
                    <img class="img-responsive" src="./images/filter.png" alt="" />
                  </div>
                  <div class="zhe">
                    <img class="img-responsive" src="./images/filter-zhe_03.png" alt="" />
                  </div>
                </div>
              </div>
              <div class="col-lg-3 col-sm-6">
                <div class="img-zhe">
                  <div class="img-box">
                    <img class="img-responsive" src="./images/filter.png" alt="" />
                  </div>
                  <div class="zhe">
                    <img class="img-responsive" src="./images/filter-zhe_03.png" alt="" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- testimonials -->
      <div class="testimonials">
        <h1>our clients’ <span>testimonials</span></h1>
        <div class="line"></div>
        <div class="line-2"></div>
        <div class="swiper test-swiper">
          <div class="swiper-wrapper">
            <!-- 第一页 -->
            <div class="swiper-slide">
              <small
                >This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem
                ipsumdolor sit amet..", comes from a line in section 1.10.32.
              </small>
              <div class="content">Dean Martin, <span>CEO Acme Inc.</span></div>
            </div>
            <div class="swiper-slide">
              <small
                >This book is a treatise on the theory of ethics, very popular during the Renaissance. The firs line of Lorem Ipsum, "Lorem ipsumdolor
                sit amet..", comes from a line in section 1.10.32.
              </small>
              <div class="content">Dean Martin, <span>CEO Acme Inc.</span></div>
            </div>
            <div class="swiper-slide">
              <small
                >This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem
                ipsumdolor sit amet..", comes from a line in section 1.10.32.
              </small>
              <div class="content">Dean Martin, <span>CEO Acme Inc.</span></div>
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
        </div>
      </div>

      <!-- contact  -->
      <div class="contact">
        <h1>feel free to <span>contact us</span></h1>
        <div class="line"></div>
        <div class="line-2"></div>
        <div class="content">
          Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in
          45 BC. This book is a treatise on the theory of ethics, verypopular during the Renaissance.
        </div>
        <div class="box">
          <form>
            <div class="form-group item">
              <label for="name">Name <span>*</span></label>
              <input type="text" class="form-control" id="name" />
            </div>
            <div class="form-group item">
              <label for="exampleInputEmail1">Email address <span>*</span></label>
              <input type="email" class="form-control" id="exampleInputEmail1" />
            </div>
            <div class="form-group textarea">
              <label>Message <span>*</span></label>
              <textarea name="Message" class="form-control"></textarea>
            </div>
            <div class="form-group">
              <button class="btn btn-warning" type="submit">SEND</button>
            </div>
          </form>
        </div>
      </div>

      <!-- footer -->
      <div class="footer">
        <div class="container">
          <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-6 right">ALL RIGHTS RESERVED. COPYRIGHT © 2014 SPIRIT8</div>
            <div class="col-lg-6 col-md-6 col-sm-6 foot-icon"><img src="./images/footer.png" alt="" /></div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
<!-- 引入jq -->
<script src="./js/jquery-3.5.1.min.js"></script>

<!-- 引入bootstrap.js -->
<script src="./js/bootstrap.min.js"></script>

<!-- swiper -->
<script src="./js/swiper-bundle.min.js"></script>

<!-- 引入wow -->
<script src="./js/wow.min.repeat.js"></script>

<!-- 引入less -->
<script src="./js/less-4.1.3.js"></script>

<script>
  // 实例化WOW插件
  new WOW().init()

  // 实例化Swiper
  // new Swpier( ) 括号内写swiper的名称（如果有多个分页器的情况下）
  var MySwiper = new Swiper('.team-swiper', {
    loop: true, // 循环模式选项

    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
  })
  var MySwiper = new Swiper('.clients-swiper', {
    loop: true, // 循环模式选项

    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
  })
  var MySwiper = new Swiper('.test-swiper', {
    loop: true, // 循环模式选项

    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
  })
</script>
